
<template>
  <view class="user-center">
    <!-- 顶部用户信息区域 -->
    <view class="user-info">
      <!-- 用户头像 -->
      <view class="avatar-container">
        <image class="avatar" :src="userInfo.avatarUrl || defaultAvatar" mode="aspectFill"></image>
      </view>
      
      <!-- 用户昵称 -->
      <view class="nickname-container">
        <text class="nickname" v-if="userInfo.nickName">{{ userInfo.nickName }}</text>
        <text class="login-tip" v-else>点击下方按钮登录</text>
      </view>
      
      <!-- 登录按钮 -->
      <button 
        v-if="!hasUserInfo" 
        class="login-btn" 
        @click="getUserProfile"
      >登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      hasUserInfo: false,
      defaultAvatar: '/static/default-avatar.png'
    }
  },
  
  onLoad() {
    // 页面加载时检查是否有用户信息
    this.checkUserInfo();
  },
  
  methods: {
    // 检查本地是否有用户信息
    checkUserInfo() {
      try {
        const userInfo = uni.getStorageSync('userInfo');
        if (userInfo) {
          this.userInfo = JSON.parse(userInfo);
          this.hasUserInfo = true;
        }
      } catch (e) {
        console.error('获取本地用户信息失败', e);
      }
    },
    
    // 获取用户信息
    getUserProfile() {
      // 在uni-app中，使用uni.getUserProfile获取用户信息
      uni.getUserProfile({
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途
        success: (res) => {
          console.log('获取用户信息成功', res);
          this.userInfo = res.userInfo;
          this.hasUserInfo = true;
          
          // 保存用户信息到本地
          try {
            uni.setStorageSync('userInfo', JSON.stringify(res.userInfo));
          } catch (e) {
            console.error('保存用户信息失败', e);
          }
          
          // 提示用户
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          });
        },
        fail: (err) => {
          console.error('获取用户信息失败', err);
          // 提示用户
          uni.showToast({
            title: '登录失败，请重试',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style>
.user-center {
  min-height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50rpx 0;
  background-color: #ffffff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.avatar-container {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 30rpx;
  border: 2rpx solid #f0f0f0;
}

.avatar {
  width: 100%;
  height: 100%;
}

.nickname-container {
  margin-bottom: 30rpx;
}

.nickname {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.login-tip {
  font-size: 32rpx;
  color: #999;
}

.login-btn {
  width: 240rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  color: #ffffff;
  background-color: #007aff;
  border-radius: 40rpx;
}
</style>